<div appDrag=".cdk-overlay-pane">
    <app-item-frame class="map-frame" [item]="data.item" [properties]="properties" [separator]="true" modifier="0"
        modifierMaxRange="true">
        <ng-container ngProjectAs="properties">
            <div [title]="layoutRatingText">{{'map.layout-rating' | translate}}: <span class="white">{{(map || {}).layoutRating || '-'}}</span></div>
            <div [title]="bossRatingText">{{'map.boss-rating' | translate}}: <span class="white">{{(map || {}).bossRating || '-'}}/5</span></div>
        </ng-container>
        <ng-container *ngIf="!map">
            <div>{{'map.not-found' | translate}}</div>
        </ng-container>
        <ng-container *ngIf="map">
            <div class="clickable" (click)="onMapClick($event)"
                title="'Click' = In-Game Browser, 'CTRL + Click' Default Browser">
                <ng-container *ngIf="map.layout">
                    <div class="description">
                        {{map.layout}}
                        <app-item-frame-separator [item]="data.item"
                            *ngIf="(map.bossCount > 0 || (map.bosses && map.bosses.length > 0)) || map.encounter || (map.items && map.items.length > 0)">
                        </app-item-frame-separator>
                    </div>
                </ng-container>
                <ng-container *ngIf="map.bossCount > 0 || (map.bosses && map.bosses.length > 0)">
                    <div class="description">
                        <div *ngIf="map.bossCount > 1"> {{'map.bosses' | translate}} ({{map.bossCount}}) </div>
                        <div *ngIf="map.bossCount <= 1"> {{'map.boss' | translate}} </div>
                        <ul class="bosses" *ngIf="map.bosses && map.bosses.length > 0">
                            <li *ngFor="let boss of map.bosses">{{boss}}</li>
                        </ul>
                        <app-item-frame-separator [item]="data.item"
                            *ngIf="map.encounter || (map.items && map.items.length > 0)">
                        </app-item-frame-separator>
                    </div>
                </ng-container>
                <ng-container *ngIf="map.encounter">
                    <div class="description">
                        <div *ngIf="map.encounter"> {{map.encounter}} </div>
                    </div>
                    <app-item-frame-separator [item]="data.item" *ngIf="map.items && map.items.length > 0">
                    </app-item-frame-separator>
                </ng-container>
                <ng-container *ngIf="map.items && map.items.length > 0">
                    <div class="description">
                        <span *ngFor="let item of map.items;let last = last">
                            {{item}}<span *ngIf="!last">,</span>
                        </span>
                    </div>
                </ng-container>
            </div>
        </ng-container>
    </app-item-frame>
</div>